<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>作者平台管理</el-breadcrumb-item>
        <el-breadcrumb-item>PC站运营</el-breadcrumb-item>
        <el-breadcrumb-item>作者列表</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        :table-loading="loading"
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @row-save="rowSave"
      >
      <template slot-scope="scoped" slot="bookList">
         <div>
             <div v-for="(item,index) in scoped.row.bookList" :key="index">
                 <div>{{item.book_title}}|</div>
                 <div>{{item.word_count}}</div>
             </div>
         </div>
        </template> 
        <template slot-scope="scoped" slot="headimgurlForm">
         <div>
           <div class="headerImg"><img :src="scoped.row.headimgurl"/></div>
           <!-- <el-input v-model="imgUrl" placeholder="" type="file" label="上传"></el-input> -->
         </div>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { pcAuthor,uploadFile } from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      loading: false,
      page: {
        total: 0,
        pageSize: 10,
      },
      type: true,
      data: [],
      params: {},
      form: {},
      default: {
        orderByList: "create_time&DESC",
        is_approve:"$in1,2"
      },
      option: {
        addBtn: false,
        excelBtn: true,
        border: true,
        delBtn:false,
        viewBtn:true,
        column: [
          {
            label: "作者ID",
            prop: "user_id",
            type: "input",
            search: true,
            row: true,
            rules: [
              {
                required: true,
                message: "",
              },
            ],
            addDisplay: true,
            editDisplay: false,
            editDisabled: true,
          },
        //   {
        //     label: "头像",
        //     prop: "headimgurl",
        //     type: "",
        //     hide:true,
        //     formslot:true,
        //     dicData: [],
        //     editDisplay: true,
        //     rules: [
        //     ],
        //   },
           {
            type: "upload",
            label: "上传头像",
            limit: 1,
            dataType: "string",
            hide:true,
            prop: "headimgurl",
            listType: "picture-card",
            action: `${catUrl}${uploadFile.uploadFile}`,
            propsHttp: {
              url: "source",
            },
            span:24
          },
          {
            label: "笔名",
            prop: "user_name",
            type: "input",
            dicData: [],
            editDisplay: true,
            search:true,
            rules: [
            ],
          },
          {
            label: "绑定手机号",
            prop: "phone",
            type: "input",
            dicData: [],
            hide: true,
            editDisplay: true,
            rules: [
            //   {
            //     required: true,
            //     message: "",
            //   },
            ],
          },
          {
            label: "真实姓名",
            prop: "real_name",
            type: "input",
            editDisplay: true,
            rules: [
              {
                required: true,
                message: "推送内容必须填写",
              },
            ],
          },
          {
            label: "性别",
            prop: "sex",
            type: "radio",
            hide: true,
            dicData:[
                {label:'男',value:1},
                {label:'女',value:2}
            ],
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "作者作品",
            prop: "bookList",
            type: "input",
            span: 24,
            row: true,
            slot:true,
            rules: [
              {
                required: true,
                message: "推送内容必须填写",
              },
            ],
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "联系电话",
            prop: "phone",
            type: "input",
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "QQ",
            prop: "qq",
            type: "input",
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "微信",
            prop: "wechat",
            type: "input",
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "邮箱",
            prop: "email",
            type: "input",
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "联系地址（选填）",
            prop: "address",
            type: "textarea",
            hide: true,
            row: true,
            span: 24,
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "个人简介（选填）",
            prop: "personal_des",
            type: "textarea",
            row: true,
            span: 24,
            hide: true,
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "是否签约",
            prop: "is_approve",
            type: "select",
            search:true,
              dicData: [
              {
                label: "是",
                value: 1,
              },
              {
                label: "否",
                value: 2,
              },
            ],
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "创建时间",
            prop: "create_time",
            type: "daterange",
            search:true,
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
          },
        ],
      },
    };
  },
  methods: {
    /**获取列表 */
    async getList(row, done, loading) {
      let response = await common(
        pcAuthor.pageAndParam,
        {...this.default,...this.params},
        this.page,
        "POST"
      );
      if (response.code == 1) {
        this.data = response.data;
        this.page = response.page;
       
      }
    },
    /**保存 */
    async rowSave(row, done, loading) {
      let response = await common(
        pcAuthor.save,
        this.form,
        {},
        "POST"
      );
      if (response.code == 1) {
        done();
        this.getList();
      }
      loading();
    },
    /**修改 */
    async rowUpdate(row, index, done, loading) {
      let params = {
        id: row.id,
      };
      let res = await common(
        pcAuthor.update,
        { ...this.form, ...params },
        {},
        "POST"
      );
      if (res.code == 1) {
        done();
        this.getList();
      }
    },
    /**刷新 */
    refreshChange() {},
    /**删除 */
    rowDel(row) {},
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**搜索 */
    searchChange(params, done,loading) {
       params.create_time = `${params.create_time ? "!<>!" + params.create_time : ""}`;
        this.params = params
        this.getList();
         done()
        // loading()
    },
  },
  mounted() {},
};
</script>
<style  scoped>
.headerImg img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
}
</style>